{include file="public/header" /}

<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-form layui-card-header layuiadmin-card-header-auto">
				<div class="layui-form-item">
					{include file="public/time" /}
					<div class="layui-inline">
						<button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
					</div>
				</div>
			</div>
			<div class="layui-card-body">
				<div style="padding-bottom: 10px;">
					<button class="layui-btn layuiadmin-btn-useradmin" data-type="charge">充值</button>
				</div>
			</div>
		</div>
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<table class="layui-hide" id="test-table-checkbox" lay-filter="test-table-checkbox"></table>

						<script type="text/html" id="payPic">
							<img src="{{d.PayPic}}" class="payPic" lay-event="showImg" style="display: inline-block; width: 100%; height: 100%;">
						</script>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

{include file="public/footer" /}

<script>
	layui.use(['table', 'form', 'laydate'], function() {
		var table = layui.table;
		var form = layui.form;
		var laydate = layui.laydate;

		//日期主题
		var laydate = layui.laydate;
		//日期范围
		laydate.render({
			elem: '#test6',
			range: true
		});

		//监听搜索
		form.on('submit(LAY-user-back-search)', function(data) {
			var field = data.field;
			//执行重载
			table.reload('test-table-checkbox', {
				where: {
					'name': field.name,
					'time': field.time,
				}
			});
		});

		//定义表格基础参数
		table.render({
			elem: '#test-table-checkbox',
			url: "{:url('admin/Charge/getChargeList')}",
			toolbar: true,
			defaultToolbar: ['filter', 'exports', 'print'],
			height: 'full-300', //最大高度
			cols: [
				[ //标题栏
					{
						type: 'numbers',
						title: '序号',
						width: 80,
						fixed: 'left',
						unresize: true
					}, {
						field: 'TrueName',
						title: "充值用户"
					}, {
						field: 'Money',
						title: "充值金额"
					}, {
						field: 'CreateTime',
						title: "充值时间"
					}, {
						field: 'PayStatus',
						title: "支付状态"
					}, {
						field: 'PayPic',
						title: '支付凭证',
						toolbar: '#payPic',
						event: "showImg"
					}, {
						field: 'PayOrderSn',
						title: "充值单号"
					}
				]
			],
			page: true
		});

		//监听工具条
		table.on('tool(test-table-checkbox)', function(obj) {
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象

			if(layEvent === 'showImg') { //查看
				layer.open({
					type: 1,
					area: ['40%', '50%'],
					title: '充值凭证',
					shade: 0.4,
					shadeClose: true,
					id: 'LAY_layuipro' //设定一个id，防止重复弹出
						,
					content: '<div style="text-align: center;"><img src=' + data.PayPic + ' alt=""></div>'
				});
			}
		});

		//事件
		var active = {
			charge: function() {
				layer.open({
					type: 2,
					title: '系统充值',
					content: 'charge',
					maxmin: true,
					area: ['40%', '50%'],
					shadeClose: true,
					btn: ['确定', '取消'],
					yes: function(index, layero) {

						var iframeWindow = window['layui-layer-iframe' + index],
							submitID = 'layuiadmin-app-form-submit',
							submit = layero.find('iframe').contents().find('#' + submitID);

						//监听提交
						iframeWindow.layui.form.on('submit(' + submitID + ')', function(data) {

							//提交 Ajax 成功后，静态更新表格中的数据
							$.ajax({
								type: "post",
								url: "{:url('admin/Charge/charge')}",
								data: {
									'Money': data.field.money,
									'PayPic': data.field.payPic
								},
								dataType: "json",
								success: function(res) {
									if(res.code == 200) {
										layer.msg(res.msg, {
											icon: 1,
											time: 600
										});
									} else {
										layer.msg(res.msg, {
											icon: 5,
											time: 600
										});
									}

									table.reload('test-table-checkbox'); //数据刷新
									layer.close(index); //关闭弹层
								}
							});
						});

						submit.trigger('click');
					}
				});
			},
		};

		$('.layui-btn.layuiadmin-btn-useradmin').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

	});
</script>